<template>
    <!-- bar =》 
        确定动态的属性
  
         1：id => echarts => 容器
         2：自己定义一个动态的属性，echartsBar =2
         3:  tooltip 布尔值
      -->
    <div
      class="bar"
      :id="echartsid"
      :style="{ height: 400 + 'px', width: 100 + '%' }"
    ></div>
  </template>
  
  <script setup  lang="ts">
  import * as echarts from "echarts";
  import { onMounted, watch, ref } from "vue";
  let echartDom: any = ref("");
  // 接收一个父组件给的数据
  let props: any = defineProps({
    echartsList: {
      //异步数据
      type: Object,
    },
    echartsid: {
      // 默认的数据
      type: String,
      default: "bar",
    },
    echartsBar:{  //默认的数据
      type: String||Number,
      default:1
    },
    tooltip:{//默认的数据
      type:Boolean,
      default:false
    }
  });
  watch(
    () => props,
    (newVal: any) => {
      console.log(newVal.echartsList, 11111111);
      //创建 画 图表
      getEchartT(newVal.echartsList);
    },
    {
      deep: true,
    }
  );
  
  //配置图表
  const getEchartT = (obj: any) => {
      // console.log(obj,55555555);
      
    // var myChart = echarts.init(document.getElementById('bar'));
    // console.log(props.echartsList.xdata,'父组件给子组件的，异步数据');
  
    //echart 属性
    let option = {
      tooltip: { // 提示 item
          trigger: props.tooltip?'Stacked Line':'',   
    },
      xAxis: {
        //x
        type: "category",
        data: obj.xdata,
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
      },
      series: [
        {
          data: obj.list,
          type: "line",
          // showBackground: true,
          // backgroundStyle: {
          //   color: "blue",
          // },
        },
        props.echartsBar==2?getLine2(obj.list1):''
      //   第二条数据 =》
      //   {
      //   name: '2012',
      //   type: 'bar',
      //   data: [20,100,200,300,500,800]
      // }
      ],
    };
  
    echartDom.value.setOption(option);
  };
  
  //定义一个获取到 数据方法
  
  const  getLine2 = (list:any)=>{
     return  {
        name: '2012',
        type: 'line',
        data: list
      }
  }
  
  onMounted(() => {
    //组件的生命周期 =》组件创建执行一次
    let dom = document.getElementById(props.echartsid)
    if(dom){
        echartDom.value = echarts.init(dom);
    }
    
  });
  
 
  </script>
  
  <style>
  </style>